import styled from 'styled-components'
import Icon from '@/components/Icon'
import Logo from '@img/btn-bg-normal.png'

export const Wrap = styled.div<{
	height?: number
	width?: number
}>`
	display: flex;
	flex-direction: column;
	position: relative;
	.pre_title {
		line-height: 1.5;
		border-spacing: 0;
		border-collapse: collapse;
		text-align: left;
		font-size: 12px;
		color: #5f5f5f;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		margin-top: 20px;
		border-bottom: 1px solid #949799;
	}
	.content {
		height: 110px;
		overflow-y: auto;
		padding-top: 7px;
		& > div.plan-item {
			height: 21px;
			line-height: 21px;
			width: 100%;
			display: inline-block;
			position: relative;
			margin-bottom: 9px;
			padding-left: 5px;
		}
		& > div.plan-item:hover {
			background: url(${Logo}) repeat-y scroll 0 0 #69bef0;
			background-size: 100%;
			color: white;
			cursor: pointer;
		}
	}
	.list-empty {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		& > div {
			margin-left: 10px;
		}
		.emptymsg {
			text-align: center;
			font-size: 12px;
			color: #b6b6b6;
		}
	}
	.plan {
		display: flex;
		.plan-label {
			line-height: 23px;
			width: 50px;
		}
	}
`

export const IconTips = styled(Icon)`
	height: 21px;
	width: 21px;
	background-position: 0 -558px;
`
